<template>
    <div class="dropdown">
      <div class="dropdown-toggle" @click="toggleDropdown">
        {{ username }}
        <span class="arrow">▼</span>
      </div>
      <div v-if="isOpen" class="dropdown-menu">
        <div class="dropdown-item" @click="changePassword">修改密码</div>
        <div class="dropdown-item" @click="logout">退出登录</div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  
  export default {
    name: 'DropdownMenu',
    setup() {
      const router = useRouter();
      const username = ref('张三'); // 从本地存储或 Vuex 中获取用户名
      const isOpen = ref(false);
  
      // 切换下拉菜单的显示状态
      const toggleDropdown = () => {
        isOpen.value = !isOpen.value;
      };
  
      // 修改密码逻辑
      const changePassword = () => {
        router.push('/xgmm');
      };
  
      // 退出登录逻辑
      const logout = () => {
        // 清除本地存储的 token 或用户信息
        localStorage.removeItem('token');
        // 跳转到登录页面
        router.push('/login');
      };
  
      return {
        username,
        isOpen,
        toggleDropdown,
        changePassword,
        logout,
      };
    },
  };
  </script>
  
  <style scoped>
  .dropdown {
    position: relative;
    display: inline-block;
    text-align: right;
  }
  
  .dropdown-toggle {
    cursor: pointer;
    padding: 10px;
    
    
    border-radius: 4px;
    display: flex;
    align-items: center;
  }
  
  .arrow {
    margin-left: 5px;
    font-size: 12px;
  }
  
  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 120px;
  }
  
  .dropdown-item {
    padding: 10px;
    cursor: pointer;
    text-align: left;
  }
  
  .dropdown-item:hover {
    background-color: #f9f9f9;
  }
  </style>